<template>
  <div class="sceneChoose">
    <van-cell-group inset class="custom-cell-group">
      <div class="jobTabs_Body_list_item">
        <van-cell>
          <template #title>
            <div class="custom-titleBox">
              <img src="@/assets/home/onlyPlain.svg" alt="" />
              <span class="custom-title1">2025年737上半年模拟机复训</span>
              <span class="custom-title2">
                训练日期：2024-12-21 9:00～13:00
              </span>
            </div>
          </template>
        </van-cell>
        <van-cell center>
          <template #title>
            <div class="custom-valueBox">
              <div
                v-for="(_, index) in 3"
                :key="index"
                class="custom-valueBoxItem"
              >
                <div class="custom-valueBoxItem1">
                  <div class="custom-avatar">其</div>
                  <div>张三其</div>
                </div>
                <div class="custom-valueBoxItem2">
                  <div class="valueBoxItem2Role">
                    座次：
                    <van-radio-group v-model="checked" direction="horizontal">
                      <van-radio name="1">
                        &nbsp;&nbsp;左座&nbsp;&nbsp;
                      </van-radio>
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <van-radio name="2">
                        &nbsp;&nbsp;右座&nbsp;&nbsp;
                      </van-radio>
                    </van-radio-group>
                  </div>
                  <div class="valueBoxItem2Role valueBoxItem2Role2">
                    角色：
                    <van-radio-group v-model="checked" direction="horizontal">
                      <van-radio name="1">&nbsp;&nbsp;PF&nbsp;&nbsp;</van-radio>
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <van-radio name="2">&nbsp;&nbsp;PM&nbsp;&nbsp;</van-radio>
                    </van-radio-group>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </van-cell>
      </div>
    </van-cell-group>
    <div class="searchBox">
      <div class="searchBoxItem1">
        <van-radio-group v-model="checked" direction="horizontal">
          <van-radio name="1">&nbsp;&nbsp;EVAL&nbsp;&nbsp;</van-radio>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <van-radio name="2">&nbsp;&nbsp;MV&nbsp;&nbsp;</van-radio>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <van-radio name="3">&nbsp;&nbsp;SBT&nbsp;&nbsp;</van-radio>
        </van-radio-group>
      </div>
      <div class="searchBoxItem2">
        <van-search
          v-model="value"
          shape="square"
          placeholder="请输入关键字"
          background="#273062"
        />
      </div>
    </div>
    <div class="sceneList">
      <van-checkbox-group v-model="checkedScene" class="checkList">
        <van-cell-group
          v-for="(item, index) in 10"
          :key="index"
          inset
          class="sceneListItem"
        >
          <div class="jobTabs_Body_list_item">
            <van-cell>
              <template #title>
                <div class="custom-titleBox">
                  <img src="@/assets/home/onlyPlain.svg" alt="" />
                  <span class="custom-title1">场景名称</span>
                  <span class="custom-title2" @click="lookEventCard">
                    查看事件卡
                  </span>
                </div>
              </template>
              <template #right-icon>
                <van-checkbox shape="square" :name="item" @click.stop />
              </template>
            </van-cell>
            <van-cell center>
              <template #title>
                <div class="custom-valueBox">
                  <div class="custom-valueBox">
                    胜任力 &nbsp;&nbsp;
                    <img src="../../assets/sceneChoose/ask.svg" />
                    &nbsp;&nbsp;com、pro、kno
                  </div>
                  <div class="custom-valueBox">
                    <img src="../../assets/sceneChoose/ask.svg" />
                    &nbsp;&nbsp;场景说明：xxxxxxxxxx
                  </div>
                </div>
              </template>
            </van-cell>
          </div>
        </van-cell-group>
      </van-checkbox-group>
    </div>
    <div class="startTrain">
      <div class="custom-valueButton" @click="gotoStart">开始训练</div>
    </div>
    <van-popup
      v-model:show="showEventCard"
      closeable
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div class="eventCard_title">
        <div class="line"></div>
        <div class="tit">&nbsp;&nbsp;事件卡信息</div>
      </div>
      <div class="popupEventCard">
        <div v-for="(_, index) in 8" :key="index" class="eventItem">
          <div class="eventItem1">
            <img src="../../assets/sceneChoose/eventIconDark.svg" />
            <div>事件卡名称</div>
            <div>
              <img
                src="../../assets/train/aclock.svg"
                style="vertical-align: middle"
              />
              &nbsp; 5min
            </div>
          </div>
          <div class="eventItem2">
            <div>主题：xxxx</div>
            <div class="eventItem2-title">胜任力：xxxx</div>
            <div>阶段：xxxxx</div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const checked = ref('2');
const value = ref('');
const checkedScene = ref([]);
const router = useRouter();

const showEventCard = ref(false);
const lookEventCard = (): void => {
  showEventCard.value = true;
};
const gotoStart = (): void => {
  router.push({
    path: '/train',
    query: {
      title: '2025年737上半年模拟机定期复训B-737',
    },
  });
};
</script>

<style scoped lang="less">
.sceneChoose {
  .custom-cell-group {
    // background-color: #283469;
    background-color: #161730;
    .custom-titleBox {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 16px;
      .custom-title1 {
        margin: 0 10px;
      }
      .custom-title2 {
        color: #838aa8;
        font-size: 14px;
      }
    }
    .custom-valueBox {
      display: flex;
      padding: 0 30px;
      .custom-valueBoxItem {
        width: 33%;
        display: flex;
        .custom-valueBoxItem1 {
          color: #aeb2c6;
          font-size: 16px;
          .custom-avatar {
            width: 30px;
            height: 30px;
            background: #4388ff;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            color: #fff;
            margin: 10px 0 10px 10px;
          }
        }
        .custom-valueBoxItem2 {
          width: 75%;
          color: #aeb2c6;
          font-size: 16px;
          margin-left: 20px;
          .valueBoxItem2Role {
            display: flex;
            align-items: center;
          }
          .valueBoxItem2Role2 {
            margin-top: 15px;
          }
        }
      }
    }
    .custom-valueButton {
      width: 180px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #fff;
      border-radius: 10px;
      cursor: pointer;
      background: url('@/assets/home/activeBackground.svg') no-repeat;
      background-size: cover;
      font-size: 16px;
    }
    :deep(.van-cell) {
      margin: 0 !important;
      padding: 20px;
      background-color: #283469;
    }
  }
  .searchBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 40px 20px 35px;
    .searchBoxItem1 {
      width: 50%;
      :deep(.van-radio__label) {
        font-size: 20px;
        color: #dfe0e3;
      }
    }
    .searchBoxItem2 {
      width: 50%;
      :deep(.van-search__content) {
        height: 40px;
        background: none;
      }
      :deep(.van-field__control) {
        height: 100%;
        color: #fff;
        font-size: 20px;
      }
      :deep(.van-search__field) {
        height: 100%;
      }
      :deep(.van-field__left-icon) {
        margin: 0 20px;
      }
      :deep(.van-icon-search) {
        font-size: 22px;
      }
      :deep(.van-icon-clear) {
        font-size: 22px;
      }
    }
  }
  .sceneList {
    background-color: #131d44;
    border: 3px solid #39405d;
    height: 435px;
    padding: 20px;
    overflow-y: auto;
    .checkList {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .sceneListItem {
      width: 49%;
      background-color: #131d44;
      .jobTabs_Body_list_item {
        width: 100%;
        margin: 20px 0;
      }
      .custom-titleBox {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 16px;
        .custom-title1 {
          margin: 0 15px;
        }
        .custom-title2 {
          cursor: pointer;
          padding: 10px 20px;
          color: #fff;
          border-radius: 10px;
          background-color: #505a85;
          font-size: 14px;
        }
      }
      .custom-valueBox {
        display: flex;
        flex-wrap: wrap;
        .custom-valueBox {
          width: 45%;
          color: #aeb2c6;
          font-size: 16px;
          text-align: right;
          margin: 10px 0;
        }
      }
      .custom-valueButton {
        width: 180px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        border-radius: 10px;
        cursor: pointer;
        background: url('@/assets/home/activeBackground.svg') no-repeat;
        background-size: cover;
        font-size: 16px;
      }
      :deep(.van-cell) {
        margin: 0 !important;
        padding: 20px;
        background-color: #283469;
      }
    }
  }
  .startTrain {
    .custom-valueButton {
      width: 200px;
      height: 50px;
      line-height: 50px;
      margin: 30px auto 10px;
      text-align: center;
      color: #fff;
      border-radius: 10px;
      cursor: pointer;
      background: url('@/assets/home/activeBackground.svg') no-repeat;
      background-size: cover;
      font-size: 16px;
    }
  }
  .eventCard_title {
    display: flex;
    align-items: center;
    color: #fff;
    margin: 20px;
    font-size: 18px;
    .line {
      width: 10px;
      height: 30px;
      background-color: #025cfc;
    }
  }
  .popupEventCard {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    padding: 0 5px;
    .eventItem {
      width: 22%;
      height: 180px;
      border: 2px solid #ccc;
      border-radius: 5px;
      margin: 20px;
      .eventItem1 {
        display: flex;
        align-items: center;
        color: #fbfbfc;
        justify-content: space-between;
        background-color: #283469;
        font-size: 16px;
        height: 50px;
        padding: 0 10px;
      }
      .eventItem2 {
        margin: 0 !important;
        font-size: 16px;
        height: 127px;
        background-color: #505a85;
        list-style-type: disc !important;
        padding-top: 10px;
        padding-left: 20px;
        color: #fbfbfc;
        div {
          margin: 0 !important;
        }
        .eventItem2-title {
          margin: 15px 0 !important;
        }
      }
    }
  }
}
</style>
